<!--支付完成页-->
<template>
  <div class="container changepassword" style="padding-top: 1rem !important">
    <div class="changepassword-frame col-sm-12 col-md-8 col-lg-6">
      <div class="tips-frame" v-if="!loading">
        <van-icon name="passed" v-if="isPay" size="2.6rem" color="green" />
        <van-icon name="close" v-else size="2.6rem" color="#F9644E" />
        <div class="tips-panel">
          <p style="margin-top: 1rem">
            Dear,
            <span v-if="isPay">Your order has been paid successfully</span>
            <span v-else
              >Your order payment failed, please try to place the order
              again</span
            >
          </p>
          <p style="margin-top:1rem">订单号：{{ orderInfo.order_code }}</p>
        </div>
      </div>
      <div class="tips-frame" v-if="loading">
        <Loading style="padding: 0" />
        <p>Querying order status</p>
      </div>
    </div>
  </div>
</template>
<script>
import tool from "@/common/tool.js";
export default {
  data() {
    return {
      loading: true, //
      payConfirrmId: "",
      isPay: false, //是否支付完成
      orderInfo: "", //订单信息
    };
  },
  activated() {
    let payConfirrmId = tool.getStorage("payConfirmId"); //获取支付完成的订单ID
    if (payConfirrmId) {
      this.payConfirrmId = payConfirrmId;
      this.getOrderInfo(payConfirrmId);
    }
  },
  methods: {
    //获取订单详情
    async getOrderInfo(payConfirrmId) {
      this.loading = true;
      let res = await this.$store.dispatch("order/orderInfo", {
        id: payConfirrmId,
      });
      console.log(res);
      this.loading = false;
      if (res.code == 0 && res.data != undefined) {
        this.orderInfo = res.data.info;
        if (res.data.info.flow_step == 0) {
          //0订单待支付，表示没有支付完成就返回
          this.isPay = false;
        } else {
          this.isPay = true;
        }
      } else {
        this.isPay = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "order.less";
</style>